import React, { Component } from "react";
import { Input, Select, Radio, Table } from "antd";
import ImgUpload from "../../components/upload-img";
const { Option } = Select;
function handleChange(value) {
  console.log(`selected ${value}`);
}
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    props: {}
  };
  if (index === 4) {
    obj.props.colSpan = 0;
  }
  return obj;
};

const columns = [
  {
    title: "颜色",
    dataIndex: "name",
    render: (value, row, index) => {
      console.log("render.....");
      console.log(value, row, index);
      const obj = {
        children: value,
        props: {}
      };
      if (index === 0) {
        obj.props.rowSpan = 2;
      }
      if (index === 1) {
        obj.props.rowSpan = 0;
      }
      if (index === 2) {
        obj.props.rowSpan = 2;
      }
      if (index === 3) {
        obj.props.rowSpan = 0;
      }
      return obj;
    }
  },
  {
    title: "尺寸",
    dataIndex: "age",
    render: renderContent
  },

  {
    title: "价格(元)",
    dataIndex: "phone",
    render: () => (
      <div>
        <Input style={{ width: 100 }} />
      </div>
    )
  },
  {
    title: "库存",
    dataIndex: "address",
    render: () => (
      <div>
        <Input style={{ width: 100 }} />
      </div>
    )
  }
];

const data = [
  {
    key: "1",
    name: "黑色",
    age: "s",
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "黑色",
    tel: "0571-22098333",
    phone: 18889898888,
    age: "m",
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "白色",
    age: "s",
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "白色",
    age: "m",
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park"
  }
];
export default class CommodityEditor extends Component {
  state = {
    value: 1,
    isNeedEditor: true
  };
  batchSet = () => {
    this.setState({
      isNeedEditor: false
    });
  };
  setStatus = () => {
    this.setState({
      isNeedEditor: true
    });
  };
  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      value: e.target.value
    });
  };
  render() {
    return (
      <div className="commodity-add basic-page">
        <div className="main-title">基本信息</div>
        <div className="goods-name">
          <span className="subtitle">商品名：</span>
          <Input style={{ width: 400 }} />
        </div>
        {/* 商品图 */}
        <div className="goods-img">
          <div className="subtitle">商品图：</div>
          <div className="tip">
            <div>
              <ImgUpload width="80px" height="80px" />
            </div>
            建议尺寸：800*800像素，你可以拖拽图片调整顺序，最多上传15张
          </div>
        </div>
        {/* 商品详情图 */}
        <div className="goods-img">
          <div className="subtitle">商品详情图：</div>
          <div>
            <div>
              <ImgUpload width="80px" height="80px" />
            </div>
          </div>
        </div>
        <div className="goods-name">
          <span className="subtitle">商品分类：</span>
          <Select
            defaultValue="lucy"
            style={{ width: 250 }}
            onChange={handleChange}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </div>
        {/* 价格库存 */}
        <div className="main-title">价格库存</div>
        <div className="goods-spec">
          <div className="spec-name subtitle">商品规格：</div>
          <div className="spec-list">
            <div>
              {/* 规格值、规格名列表start */}
              <div className="size">
                规格名： <Input style={{ width: 180 }} />
                <Radio style={{ marginLeft: 10 }}>添加规格图片</Radio>
              </div>
              <div className="value">
                <div>规格值：</div>
                <div className="self-input">
                  <div>
                    <Input style={{ width: 180 }} />
                  </div>
                  <div className="value-self">
                    <ImgUpload width="90px" height="94px" />
                  </div>
                </div>
                {/* 规格值、规格名列表end */}

                <div className="self-input">
                  <div>
                    <Input style={{ width: 180 }} />
                  </div>
                  <div className="value-self">
                    <ImgUpload width="90px" height="94px" />
                  </div>
                </div>

                <div className="add-value">添加规格值</div>
              </div>
            </div>

            <div>
              <div className="size">
                规格名： <Input style={{ width: 180 }} />
              </div>
              <div className="value">
                <div>规格值：</div>
                <div className="self-input">
                  <div>
                    <Input style={{ width: 180 }} />
                  </div>
                  {/* <div className="value-self">
                    <ImgUpload width="90px" height="94px" />
                  </div> */}
                </div>
                <div className="add-value">添加规格值</div>
              </div>
            </div>
            <div className="size">
              <span className="btn">请加规格项目</span>{" "}
            </div>
          </div>
        </div>
        <div className="goods-spec">
          <div className="spec-name subtitle">规格明细：</div>
          <div className="spec-list">
            <Table columns={columns} dataSource={data} bordered />
            {this.state.isNeedEditor ? (
              <div>
                批量设置：
                <span className="price" onClick={this.batchSet}>
                  价格
                </span>
                <span className="number" onClick={this.batchSet}>
                  库存
                </span>
              </div>
            ) : (
              <div>
                批量设置：
                <Input style={{ width: 80 }} />
                <span className="save" onClick={this.setStatus}>
                  保存
                </span>
                <span className="number" onClick={this.setStatus}>
                  取消
                </span>
              </div>
            )}
          </div>
        </div>
        <div>
          <div className="subtitle">价格：</div>
          <Input style={{ width: 120 }} prefix="￥" suffix="RMB" />
        </div>
        <div className="goods-spec">
          <div>
            <span className="subtitle">划线价格：</span>
          </div>
          <div>
            <Input style={{ width: 120 }} />
            <div>划线价格会以划线形式在商品列表中显示</div>
          </div>
        </div>
        <div>
          <span className="subtitle inventory">库存：</span>
          <Input style={{ width: 120 }} />
        </div>
        {/* 物流信息 */}
        <div className="main-title">物流信息</div>
        <div>
          <span className="subtitle freight">快递运费：</span>
          <Radio style={{ marginLeft: 10 }}>添加规格图片</Radio>
        </div>
        {/* 其他信息 */}
        <div className="main-title">其他信息</div>
        <div className="goods-spec">
          <div className="subtitle">上架时间：</div>
          <div>
            <Radio.Group onChange={this.onChange} value={this.state.value}>
              <Radio className="radioStyle" value={1}>
                立即上架售卖
              </Radio>
              <Radio className="radioStyle" value={2}>
                自定义上架时间
              </Radio>
              <Radio className="radioStyle" value={3}>
                暂不售卖，放入仓库
              </Radio>
            </Radio.Group>
          </div>
        </div>
        <div className="goods-spec">
          <div className="subtitle">是否放在首页精选：</div>
          <div>
            <Radio.Group onChange={this.onChange} value={this.state.value}>
              <Radio className="radioStyle" value={1}>
                是
              </Radio>
              <Radio className="radioStyle" value={2}>
                否
              </Radio>
            </Radio.Group>
          </div>
        </div>
        <div
          style={{
            width: "100%",
            background: "transparent",
            // opacity: 0,
            position: "fixed",
            bottom: 0,
            left: 200,
            right: 20,
            // background: "#FFFFFF",
            padding: "0px 215px 0px 0px",
            zIndex: 99
            // boxShadow: "0 -2px 4px 0 rgba(0, 0, 0, 0.1)"
          }}
        >
          <div
            style={{
              background: "#FFFFFF",
              //   border: "1px solid red",
              padding: "25px 0",
              boxShadow: "0 -2px 4px 0 rgba(0, 0, 0, 0.1)"
            }}
          >
            hhhhhhhhhhhhhh
          </div>
        </div>
      </div>
    );
  }
}
